//1. 公用样式
require('../../assets/css/index.less');
require('../../assets/fonts/iconfont.css');
require('../../assets/css/basic.less');
//2. 当前页面样式
require('./sportData.less');

//3. 公用js
let dom = require('../../utils/dom.js');
let https = require('../../utils/https.js');
let local = require('../../utils/local.js');
// let echarts = require('../../lib/echarts.js');
import * as echarts from 'echarts';
//4. 当前页面的js
dom.ready(function () {

  // 返回上一步
  back.addEventListener('click', function () {
    window.history.go(-1);
  });


// 回填数据：把personal页面的头像数据回填到本页面显示出来
function rander() { 
  // 先获取本地数据
  let localData=local.get('userData');
  console.log(localData);
  // 把本地数据头像渲染到页面
  vatar.src = 'http://47.96.154.185:3701' + localData.imgUrl;
}

rander();




  // 获取运动数据
  function getSportData() {
    https.get('/api/exercise', {}, function (res) {
      if (res.errno == 0) {
        console.log(res.data); //数组
        // 渲染总运动到页面
        allTime.innerHTML = res.data.sum7Duration;
        // 渲染本周消耗到页面
        allCalorie.innerHTML = res.data.sum7Calorie;
        
        // 7天日期
        let day7 = res.data.days.map(v => {
          return v.date.slice(6);
        });
        // console.log(day7);

        // 持续时长
        let sumDuration7 = res.data.days.map(v => {
          return v.sumDuration;
        });
        // console.log(sumDuration7);

        let runData = 0;
        let rideData = 0;
        let trainData = 0;
        res.data.days.forEach(v => {
          // console.log(v.exerciseData);
          v.exerciseData.forEach(v2 => {
            // console.log(v2); //每一天的运动数据（跑步，骑行，训练）
            // 判定type=0跑步，1骑行，2训练
            if (v2.type == 0) {
              runData += v2.duration;
            } else if (v2.type == 1) {
              rideData += v2.duration;
            } else {
              trainData += v2.duration;
            }
          });
        });
        // console.log(runData, rideData, trainData);
        // 饼图
        // 基于准备好的dom，初始化echarts实例
        var myChartPie = echarts.init(dom.get('#piePic'));
        let optionPie = {
          title: {
            text: '运动分类',
            left: '10px',
            top: '10px'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: '20px',
            top: 'middle'
          },
          series: [{
            name: '运动分类',
            type: 'pie',
            radius: '50%',
            label: {
              normal: {
                show: true,
                formatter: '{d}%',
                position: "inside"
              }
            },
            labelLine: {
              show: false
            },
            color: ['#736171', '#ee534c', '#58bb92'],
            data: [{
              value: runData,
              name: '跑步'
            },
            {
              value: rideData,
              name: '骑行'
            },
            {
              value: trainData,
              name: '训练'
            }
            ],
          }]
        };
        // console.log(optionPie);
        // 使用刚指定的配置项和数据显示图表。
        optionPie && myChartPie.setOption(optionPie);
        // 柱状图
        // 基于准备好的dom，初始化echarts实例
        var myChartCloum = echarts.init(dom.get('#cloumPic'));
        // 指定图表的配置项和数据
        let optionCloum = {
          title: {
            text: '近7天运动数据',
            textStyle: {
              color: 'black'
            },
            left: '0px',
            top: '15px'
          },
          // 提示框组件
          tooltip: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          // x轴
          xAxis: {
            data: day7,
            axisLabel: {
              interval: 0
            },
            axisTick: {
              alignWithLabel: true
            }
          },
          // y轴
          yAxis: {},
          //数据配置-可以设置各种不同的显示图例类型
          series: [
            {
              name: '销量',
              type: 'bar',
              data: sumDuration7
            }
          ]
        }
        // console.log(optionCloum);
        // 使用刚指定的配置项和数据显示图表。
        myChartCloum.setOption(optionCloum);

        // 折线图
        var chartDom = dom.get('.echars3');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '近7日训练次数',
          },
          xAxis: {
            type: 'category',
            data: day7,
            left:20
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              rotate: 40,
            }
          },
          series: [
            {
              data: sumDuration7,
              type: 'line'
            }
          ]
        };
        // console.log(option);
        option && myChart.setOption(option);

        // 堆叠图
        var chartDom4 = dom.get('.echars4');
        console.log(chartDom4);
        var myChart4 = echarts.init(chartDom4);
        var  option4 = {
          title: {
            text: '近7日运动分类',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {
            x: 'right',
            y: 'middle',
            width:10
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: day7,
            axisTick: {//刻度尺
              show: false
            }
          },
          series: [
            {
              name: '跑步',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
              name: '骑行',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '训练',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
          
          ]
        }; 
        console.log(option4);
        option4 && myChart4.setOption(option4);
        




      }
    });
  }
  getSportData();







})